<template>
	<view>
		<uni-card>
			<image style=" width: 100%; height: 120px;" :src="courselist.img" mode=""></image>
		</uni-card>
		<view class="top_tabs">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<u-divider :half-width='350' :margin-top='20' :use-slot='false'></u-divider>
		</view>
		<view v-if="current==2" class="kcpl">
			<view v-if="comments.length==0">
				<u-empty :margin-top=150 text="评论为空" mode="list"></u-empty>
			</view>
			<view v-else>
				<view class="text">
					评论详情(99+个人评论)
				</view>
				<view class="plindex" v-for="(items,value) in comments" :key="value">
					<u-avatar :src="items.img"></u-avatar>
					<view class="text">{{items.username}}</view>
					<u-rate :count="count" v-model="items.star" class="plrate"></u-rate>
					<view class="time">{{items.time}}</view>
					<view class="comment">{{items.comment}}</view>
					<view style="margin-top: 70rpx;margin-left: 150rpx;">
						<u-divider :half-width='280' :use-slot='false'></u-divider>
					</view>
				</view>
			</view>
		</view>

		<view v-if="current==1" class="kcml">
			<u-empty :margin-top=150 text="目录为空" mode="list"></u-empty>
		</view>

		<view v-if="current==0" class="kcjs">
			<u-empty :margin-top=150 text="介绍为空" mode="list"></u-empty>
			<view class="toadd">
				<u-button type="error" :disabled = "opinion" @click='addcourse'>加入课程</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '介绍'
				}, {
					name: '目录'
				}, {
					name: '评价'
				}],
				comments: [],
				courselist: {},
				count: 5,
				current: 0,
				courseid: 0,
				opinion: false
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.courseid = option.id;
			this.isadd();
		},
		onReady() {
			this.getcourse();
		},
		methods: {
			//判断是否已加入
			isadd() {
				this.$http('/isadd', {
						studentid: uni.getStorageSync("stuid"),
						courseid: this.courseid
					})
					.then((res) => {
						console.log(res);
						if (res.length) {
							this.opinion = true;
							console.log(this.opinion)
						}
					})
			},
			
			change(index) {
				this.current = index;
				if (index == 2) {
					this.getcomment()
				}
			},

			getcourse() {
				let this_ = this;
				this.$http('/selectone', {
					courseid: this.courseid
				}).then((res) => {
					this_.courselist = res.data[0];
				})
			},

			addcourse() {
				this.$http('/toadd', {
					studentid: uni.getStorageSync("stuid"),
					courseid: this.courseid,
					courseName: this.courselist.courseName,
					img: this.courselist.img
				})
				.then((res) => {
					console.log(res);
					if (res.code == 200) {
						uni.redirectTo({
							url: "addCourse?id=" + this.courseid,
							
						})
					}
				})
			},
			getcomment() {
				let this_ = this;
				this.$http('/getcomment', {
					courseid: this.courseid
				}).then((res) => {
					this_.comments = res;
				})
			}
		}
	}
</script>

<style>
	.top_image {
		display: flex;
		justify-content: center;
		width: 120rpx;
		height: 200rpx;
	}

	.toadd {
		margin-top: 275rpx;
	}

	.text {
		font-size: 35rpx;
	}

	.plindex {
		position: relative;
		display: flex;
		justify-content: start;
		flex-wrap: wrap;
		margin-top: 30rpx;
	}

	.plindex .plrate {
		margin-left: 300rpx;
	}

	.plindex .text {
		margin-left: 50rpx;
	}

	.plindex .time {
		position: absolute;
		top: 50rpx;
		left: 140rpx;
	}

	.plindex .comment {
		position: absolute;
		top: 100rpx;
		left: 140rpx;
		font-size: 35rpx;
	}
</style>
